<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/layouts/include/taglib.jsp" %> 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="decorator" content="default" />

<script type="text/javascript">

	var empNo = "${param.empNo}";		//项目id
	
	/* function createTaskTable(data){
		
		'<td class="">'+data[i].taskName+'</td><td><a href="#">'+data[i].depict+'</a></td><td class="hidden-480">'+data[i].status+'<span class="label label-warning">Pending</span></td>'
		
	}
 */
</script>
</head>
<body >

<form class="col-sm-12">
		<div class="col-xs-12 col-sm-8 widget-container-span">
			<div class="widget-box">
				<div class="widget-header header-color-blue">
					<h5 class="bigger lighter">
						<i class="icon-table"></i>
						我的任务
					</h5>

					<div class="widget-toolbar widget-toolbar-light no-border">
						<select id="simple-colorpicker-1" class="hide">
							<option selected="" data-class="blue" value="#307ECC">#307ECC</option>
							<option data-class="blue2" value="#5090C1">#5090C1</option>
							<option data-class="blue3" value="#6379AA">#6379AA</option>
							<option data-class="green" value="#82AF6F">#82AF6F</option>
							<option data-class="green2" value="#2E8965">#2E8965</option>
							<option data-class="green3" value="#5FBC47">#5FBC47</option>
							<option data-class="red" value="#E2755F">#E2755F</option>
							<option data-class="red2" value="#E04141">#E04141</option>
							<option data-class="red3" value="#D15B47">#D15B47</option>
							<option data-class="orange" value="#FFC657">#FFC657</option>
							<option data-class="purple" value="#7E6EB0">#7E6EB0</option>
							<option data-class="pink" value="#CE6F9E">#CE6F9E</option>
							<option data-class="dark" value="#404040">#404040</option>
							<option data-class="grey" value="#848484">#848484</option>
							<option data-class="default" value="#EEE">#EEE</option>
						</select>
					</div>
				</div>

				<div class="widget-body">
					<div class="widget-main no-padding">
						<table id="memberTaskTable" class="table table-striped table-bordered table-hover">
							<thead class="thin-border-bottom">
								<tr>
									<th>
										<i class="icon-user"></i>
										任务名称
									</th>
									
									<th>
										任务类型
									</th>

									<th>
										任务描述
									</th>
									
									<th class="hidden-480">任务状态</th>
								</tr>
							</thead>

							<tbody>
								
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div><!-- /span -->
		
		
</form>

<script type="text/javascript">
$(document).ready(function() {
	
	Otod.ajax({
		url:"${ctx}/pm/task/findByEmpNo.do",
		data: empNo,
		successFn:function(data){
			var html="";
			var task = {};
			task.taskList = data;
			html = Mustache.render($("#memberTaskTemplate").html(), task);
			$('tbody').append(html);
		}
	});  	
	
	
	
	$('#simple-colorpicker-1').ace_colorpicker({pull_right:true}).on('change', function(){
		var color_class = $(this).find('option:selected').data('class');
		var new_class = 'widget-header';
		if(color_class != 'default')  new_class += ' header-color-'+color_class;
		$(this).closest('.widget-header').attr('class', new_class);
	});
	
})


</script>
<script type="text/template" id="memberTaskTemplate">
{{#taskList}}
    <tr>
        <td>{{taskName}}</td>
		<td>{{taskType}}</td>
        <td>{{depict}}</td>
        <td><button id="{{status}}" type="button" class="btn btn-xs   dynamic" data-toggle="button"><i class="icon-ok"></i>{{statusName}}</button></td>
    </tr>
{{/taskList}}
</script>



</body>

